<template>
  <div>
    <head_><h1>在线客服</h1><br></head_>
    <div class="timer">{{nowTime}}</div>
    <van-cell is-link title="选择客服" @click="chonseFlag = true"/>
    <van-action-sheet v-model="chonseFlag" :actions="chater" @select="onSelect"/>
    <div class="wrap">
      <div class="content_box" id="box" ref="scrollBox">
        <div
            :class="item.froms == thisUser ? 'userbox' : 'userbox2'"
            v-for="(item, index) in chatList"
            :key="index"
        >
          <div :class="item.froms == thisUser ? 'nameInfo' : 'nameInfo2'">
            <div style="font-size: 14px">
              {{ item.froms }}
            </div>
            <div
                :class="item.froms == thisUser ? 'contentText' : 'contentText2'"
            >
              {{ item.msg }}
            </div>
          </div>
          <div>
            <van-image round width="50px" height="50px"
                       src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"/>
          </div>
        </div>
      </div>
      <div style="height: 50px"> </div>
      <div class="bottom">
        <van-field
            v-model="inputValue"
            center
            type="textarea"
            :autosize="{ maxHeight: 100, minHeight: 25 }"
            placeholder="请输入内容"
            rows="1"
        >
          <template #button>
            <van-button size="small" type="primary" @click="sendOut">发送</van-button>
          </template>
        </van-field>
      </div>
    </div>
  </div>
</template>

<script>
import head_ from "./header";
import {Toast} from "vant";

let socket;

export default {
  name: "chatCli",
  data() {
    return {
      // 弹出层标记
      chonseFlag: false,
      // 客服选项
      chater: [{name: 'sup1'}],
      // 自己
      thisUser: "",
      // 收信人
      toUser: "",
      // 输入的信息
      inputValue: "",
      // 聊天记录
      chatList: [],
      // 当前的时间
      nowTime:""
    }
  },
  components: {
    head_,
  },
  created() {
    this.init()
  },
  mounted() {
    this.getNowDate()
  },
  methods: {
    // 当选中的时候
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.chonseFlag = false;
      // 然后我们就将当前会话的人保存
      Toast("会话建立 " + item.name);
      this.toUser = item.name
      // 此时我们就要开始查询数据库然后刷新聊天记录了
      this.$http.get("/chat/getChatRecords/" + this.thisUser + "/" + this.toUser).then(resp => {
        this.chatList = resp.data.data
      })
      console.log(this.chatList)

    },
    sendOut() {
      if (!this.toUser) {
        this.$message({type: 'warning', message: '请选择聊天对象'});
        return;
      }
      if (!this.inputValue) {
        this.$message({type: 'warning', message: '请输入内容'});
      } else {
        if (typeof (WebSocket) == 'undefined') {
          console.log('您的浏览器不支持WebSocket');
        } else {
          console.log('您的浏览器支持WebSocket');
          // 组装待发送的消息 json
          // {"from": "zhang", "to": "admin", "text": "聊天文本"}
          let message = {from: this.thisUser, to: this.toUser, text: this.inputValue};
          socket.send(JSON.stringify(message));  // 将组装好的json发送给服务端，由服务端进行转发
          // 构建消息内容，本人消息
          this.chatList.push({
            froms: this.thisUser,
            msg: this.inputValue
          })
          this.inputValue = '';
        }
      }
    },
    init() {
      this.thisUser = localStorage.getItem('ms_username') ? localStorage.getItem('ms_username') : {};
      console.log(this.thisUser);
      let username = this.thisUser;
      let _this = this;
      if (typeof (WebSocket) == 'undefined') {
        console.log('您的浏览器不支持WebSocket');
      } else {
        console.log('您的浏览器支持WebSocket');
        let socketUrl = 'ws://192.168.1.195:8014/chat/chatserver/' + username;
        if (socket != null) {
          socket.close();
          socket = null;
        }
        // 开启一个websocket服务
        socket = new WebSocket(socketUrl);
        //打开事件
        socket.onopen = function () {
          console.log('websocket已打开');
        };
        //  浏览器端收消息，获得从服务端发送过来的文本消息
        socket.onmessage = function (msg) {
          console.log('收到数据====' + msg.data);
          let data = JSON.parse(msg.data);  // 对收到的json数据进行解析， 类似这样的： {"users": [{"username": "zhang"},{ "username": "admin"}]}
          if (data.users) {  // 获取在线人员信息
            let users;
            users = data.users.filter(user => user.username !== username);  // 获取当前连接的所有用户信息，并且排除自身，自己不会出现在自己的聊天列表里
            // 循环处理一下生成真正要用到的数据
            console.log(users)
            _this.chater = [];
            users.forEach(e => {
              _this.chater.push({
                name: e.username
              })
            })
          } else {
            // 如果服务器端发送过来的json数据 不包含 users 这个key，那么发送过来的就是聊天文本json数据
            //  // {"from": "zhang", "text": "hello"}
            _this.chatList.push({
              froms: data.from,
              msg: data.text
            })
          }
          // }
        };
        //关闭事件
        socket.onclose = function () {
          console.log('websocket已关闭');
        };
        //发生了错误事件
        socket.onerror = function () {
          console.log('websocket发生了错误');
        };
      }
    },
    getNowDate() {
      let that = this;
      setInterval(function(){
        var date = new Date();
        var sign2 = ":";
        var year = date.getFullYear() // 年
        var month = date.getMonth() + 1; // 月
        var day = date.getDate(); // 日
        var hour = date.getHours(); // 时
        var minutes = date.getMinutes(); // 分
        var seconds = date.getSeconds() //秒
        var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
        var week = weekArr[date.getDay()];
        // 给一位数的数据前面加 “0”
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (day >= 0 && day <= 9) {
          day = "0" + day;
        }
        if (hour >= 0 && hour <= 9) {
          hour = "0" + hour;
        }
        if (minutes >= 0 && minutes <= 9) {
          minutes = "0" + minutes;
        }
        if (seconds >= 0 && seconds <= 9) {
          seconds = "0" + seconds;
        }
        that.nowTime = year + "-" + month + "-" + day + " " + hour + sign2 + minutes + sign2 + seconds;
      },)

    },
  }
}
</script>


<style scoped>
.wrap {


  height: 50%;
  width: 100%;
  position: relative;
}

.title {


  height: 40px;
  width: 100%;
  background-color: #eaeaea;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bottom {


  min-height: 50px;
  width: 100%;
  border-top: 1px solid #eaeaea;
  position: fixed;
  bottom: 0;
}

.content_box {


  /*
  中间栏计算高度，110是包含了上下固定的两个元素高度90
  这里padding：10px造成的上下够加了10，把盒子撑大了，所以一共是20要减掉
  然后不知道是边框还是组件的原因，导致多出了一些，这里再减去5px刚好。不然会出现滚动条到顶或者底部的时候再滚动的话就会报一个错，或者出现滚动条变长一下的bug
  */
  height: calc(100% - 115px);
  overflow: auto;
  padding: 10px;
}

.timer {


  text-align: center;
  color: #c2c2c2;
}

/* 发送的信息样式 */
/*
右边消息思路解释：首先大盒子userbox内放两个盒子，一个放头像，一个放用户名和发送的内容，我们先用flex让他横向排列。
然后把写文字的大盒子设置flex：1。这个属性的意思就是让这个元素撑满父盒子剩余位置。然后我们再把文字盒子设置flex，并把他对齐方式设置为尾部对齐就完成了基本的结构，然后微调一下就可以了
*/
.userbox {


  width: 100%;
  display: flex;
  margin-bottom: 10px;
}

.nameInfo {


  /* 用flex：1把盒子撑开 */
  flex: 1;
  margin-right: 10px;
  /* 用align-items把元素靠右对齐 */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.contentText {


  background-color: #9eea6a;
  /* 把内容部分改为行内块元素，因为盒子flex：1把盒子撑大了，所以用行内块元素让内容宽度不根据父盒子来 */
  display: inline-block;
  /* 这四句是圆角 */
  border-top-left-radius: 10px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  /* 最大宽度限定内容输入到百分61换行 */
  max-width: 61%;
  padding: 5px 10px;
  /* 忽略多余的空白，只保留一个空白 */
  white-space: normal;
  /* 换行显示全部字符 */
  word-break: break-all;
  margin-top: 3px;
  font-size: 14px;
}

/* 接收的信息样式 */
/*
左边消息思路解释：跟上面一样，就是换一下位置，首先通过把最外层大盒子的排列方式通过flex-direction: row-reverse;属性翻转，也就是头像和文字盒子换位置
然后删除掉尾部对齐方式，因为不写这个默认是左对齐的。我们写的左边就没必要再写了。
*/
.userbox2 {


  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 10px;
}

.nameInfo2 {


  /* 用flex：1把盒子撑开 */
  flex: 1;
  margin-left: 10px;
}

.contentText2 {


  background-color: #9eea6a;
  /* 把内容部分改为行内块元素，因为盒子flex：1把盒子撑大了，所以用行内块元素让内容宽度不根据父盒子来 */
  display: inline-block;
  /* 这四句是圆角 */
  border-top-left-radius: 0px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  /* 最大宽度限定内容输入到百分61换行 */
  max-width: 61%;
  padding: 5px 10px;
  /* 忽略多余的空白，只保留一个空白 */
  white-space: normal;
  /* 换行显示全部字符 */
  word-break: break-all;
  margin-top: 3px;
  font-size: 14px;
}
</style>
